<template>
  <div class="tw-title"
    :style="{color:color,lineHeight:lineHeight,paddingLeft:paddingLeft,borderBottomColor:borderBottomColor}">
    <div class="tw-title-left"
      :style="{fontSize:fontSize}">
      <img v-if="markImage[0]"
        :src="`${this.$twApp.fileBaseUrl}${this.markImage[0].localPath}`"
        :style="{height: markImageSize, left: markImageLeft, top: markImageTop}" />
      <i v-else
        :style="{backgroundColor:markLineColor}"></i>
      <span :style="{paddingLeft: textPaddingLeft,fontWeight: titleIsBold ? '700':'400'}">{{title}}</span>
      <el-tooltip v-if="toolTipText"
        class="item"
        :effect="toolTipTheme">
        <div slot="content">
          <span v-html="toolTipText"></span>
        </div>
        <em class="icon iconfont"
          :style="{color: toolTipIconColor || 'inherit'}">&#xe63b;</em>
      </el-tooltip>
    </div>

    <div class="tw-title-right">
      <a class="tw-title-more"
        :style="{color: moreColor, fontSize: moreSize}"
        v-if="moreUrl || moreText"
        :href="moreUrl"
        :target="openInNewWindow?'_target':'_self'">
        <span>{{moreText}}</span>
        <i :style="{borderRightColor: moreColor, borderBottomColor: moreColor}"></i>
      </a>
    </div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'image',

  props
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
